<template>
	<view>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<u-cell-group :border="false">
			<!-- #ifdef H5 -->
			<u-cell title="修改绑定手机" v-if="!$isWeChat" isLink :value="userInfo.telPhone | phone"
				@click="changePhoneShow = true"></u-cell>
			<u-cell title="修改登录密码" v-if="!$isWeChat" isLink value="" @click="changePasswordShow = true"></u-cell>
			<!-- #endif -->
			<!-- #ifdef APP-PLUS -->
			<u-cell title="修改绑定手机" isLink :value="userInfo.telPhone | phone" @click="changePhoneShow = true"></u-cell>
			<u-cell title="修改登录密码" isLink value="" @click="changePasswordShow = true"></u-cell>
			<!-- #endif -->

			<u-cell title="账户注销" isLink @click="showToast"></u-cell>
		</u-cell-group>

		<!-- #ifndef MP -->
		<!-- 修改绑定手机号窗口 -->
		<u-popup :show="changePhoneShow" mode="center" :closeOnClickOverlay="false" :round="5"
			@close="changePhoneClose">
			<view class="popupBox">
				<u--form labelPosition="top" :model="phoneModel" labelWidth="80" :rules="rules1" ref="form1">
					<view class="phone">
						原绑定手机号：{{ userInfo.telPhone | phone }}
					</view>
					<u-form-item prop="code">
						<u-input placeholder="原手机短信验证码" maxlength="11" v-model="phoneModel.code">
							<template slot="suffix">
								<u-code ref="uCode1" @change="codeChange1" seconds="60" @start="disabled1 = true"
									@end="disabled1 = false"></u-code>
								<u-button @tap="getCode1" :text="tips1" type="error" :disabled="disabled1" size="small">
								</u-button>
							</template>
						</u-input>
					</u-form-item>
					<u-form-item prop="newPhone">
						<u-input placeholder="新绑定手机号" maxlength="11" v-model="phoneModel.newPhone"
							@change="changePhone">
						</u-input>
					</u-form-item>
					<u-form-item prop="newCode">
						<u-input placeholder="新手机短信验证码" maxlength="11" v-model="phoneModel.newCode">
							<template slot="suffix">
								<u-code ref="uCode2" @change="codeChange2" seconds="60" @start="disabled2 = true"
									@end="disabled2 = false"></u-code>
								<u-button @tap="getCode2" :text="tips2" type="error" :disabled="disabled2" size="small">
								</u-button>
							</template>
						</u-input>
					</u-form-item>
				</u--form>
				<u-button type="error" text="提交" customStyle="margin-top: 10px" @click="submitChangePhone"
					:loading="changePhoneLoading"></u-button>
				<u-icon name="close-circle-fill" size="30" color="#EB7C7C" class="close" @click="changePhoneClose">
				</u-icon>
			</view>
		</u-popup>

		<!-- 修改登录密码窗口 -->
		<u-popup :show="changePasswordShow" mode="center" :closeOnClickOverlay="false" :round="5"
			@close="changePasswordClose">
			<view class="popupBox">
				<u-subsection :list="tab" :current="curNow" bgColor="#ffffff" fontSize="14" activeColor="#DE2E2E"
					@change="sectionChange"></u-subsection>
				<u--form labelPosition="top" :model="passwordModel" labelWidth="80" :rules="rules2" ref="form2"
					v-show="curNow == 0">
					<u-form-item prop="oldPassword">
						<u-input placeholder="请输入旧密码" password v-model="passwordModel.oldPassword">
						</u-input>
					</u-form-item>
					<u-form-item prop="newPassword">
						<u-input placeholder="请输入新密码" password v-model="passwordModel.newPassword">
						</u-input>
					</u-form-item>
					<u-form-item prop="conPassword">
						<u-input placeholder="请再次输入新密码" password v-model="passwordModel.conPassword">
						</u-input>
					</u-form-item>
				</u--form>
				<u--form labelPosition="top" :model="passwordModel" labelWidth="80" :rules="rules3" ref="form3"
					v-show="curNow == 1">
					<u-form-item prop="code">
						<u-input placeholder="手机短信验证码" v-model="passwordModel.code">
							<template slot="suffix">
								<u-code ref="uCode3" @change="codeChange3" seconds="60" @start="disabled3 = true"
									@end="disabled3 = false"></u-code>
								<u-button @tap="getCode3" :text="tips3" type="error" :disabled="disabled3" size="small">
								</u-button>
							</template>
						</u-input>
					</u-form-item>
					<u-form-item prop="newPassword">
						<u-input placeholder="请输入新密码" password v-model="passwordModel.newPassword">
						</u-input>
					</u-form-item>
					<u-form-item prop="conPassword">
						<u-input placeholder="请再次输入新密码" password v-model="passwordModel.conPassword">
						</u-input>
					</u-form-item>
				</u--form>
				<u-button type="error" text="提交" customStyle="margin-top: 10px" @click="submitChangePassword"
					:loading="changePasswordLoading"></u-button>
				<u-icon name="close-circle-fill" size="30" color="#EB7C7C" class="close" @click="changePasswordClose">
				</u-icon>
			</view>
		</u-popup>

		<!-- 重新登录提示 -->
		<u-modal title="温馨提示" :show="showModal" :content="contentModal">
			<u-button slot="confirmButton" text="立即登录" type="error" shape="circle" @click="onJump('/pages/user/login')">
			</u-button>
		</u-modal>

		<!-- #endif -->
		<!-- 设置支付密码 -->
		<u-popup :show="setPayPasswordShow" mode="center" :round="5">

			<fSetPayPassword v-if="setPayPasswordShow" :setPayPasswordShow.sync="setPayPasswordShow" />

		</u-popup>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		sendUnbindPhoneSMS,
		sendBindPhoneSMS,
		updateBindPhone,
		sendPasswordSMS,
		updatePassword,
		clearMember
	} from '@/config/api';

	import fSetPayPassword from "@/components/module/f-setPayPassword/f-setPayPassword";
	export default {
		data() {
			return {
				// 修改绑定手机号
				changePhoneShow: false,
				phoneModel: {
					code: "",
					newPhone: "",
					newCode: ""
				},
				rules1: {
					'code': {
						required: true,
						message: '请输入原手机号短信验证码',
						trigger: ['blur', 'change']
					},
					'newPhone': [{
							required: true,
							message: '请输入新手机号',
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								return uni.$u.test.mobile(value);
							},
							message: '新手机号格式不正确',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								if (this.userInfo.telPhone == value) {
									callback(new Error('新手机号不能与原手机号一样'));
								} else {
									// 如果校验通过，也要执行callback()回调
									callback();
								}
							},
							trigger: ['change', 'blur'],
						},
					],
					'newCode': {
						required: true,
						message: '请输入新手机号短信验证码',
						trigger: ['blur', 'change']
					},
				},
				tips1: "",
				disabled1: false,
				tips2: "",
				disabled2: true,
				changePhoneLoading: false,
				// 修改登录密码
				changePasswordShow: false,
				tab: ['密码验证修改', '短信验证修改'],
				curNow: 0,
				passwordModel: {
					code: "",
					oldPassword: "",
					newPassword: "",
					conPassword: "",
				},
				rules2: {
					'oldPassword': {
						required: true,
						message: '请输入现在的登录密码',
						trigger: ['blur', 'change']
					},
					'newPassword': [{
							required: true,
							message: '请输入新登录密码',
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								if (this.passwordModel.oldPassword == value) {
									callback(new Error('新旧密码不能相同'));
								} else {
									// 如果校验通过，也要执行callback()回调
									callback();
								}
							},
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								return uni.$u.test.rangeLength(value, [8, 20]);
							},
							message: '新登录密码需为8-20个字符',
							trigger: ['change', 'blur'],
						}
					],
					'conPassword': {
						validator: (rule, value, callback) => {
							return this.passwordModel.newPassword == value;
						},
						message: '两次输入密码不一致',
						trigger: ['change', 'blur'],
					},
				},
				rules3: {
					'code': {
						required: true,
						message: '请输入短信验证码',
						trigger: ['blur', 'change']
					},
					'newPassword': [{
							required: true,
							message: '请输入新登录密码',
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								if (this.passwordModel.oldPassword == value) {
									callback(new Error('新旧密码不能相同'));
								} else {
									// 如果校验通过，也要执行callback()回调
									callback();
								}
							},
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								return uni.$u.test.rangeLength(value, [8, 20]);
							},
							message: '新登录密码需为8-20个字符',
							trigger: ['change', 'blur'],
						}
					],
					'conPassword': [{
						validator: (rule, value, callback) => {
							return this.passwordModel.newPassword == value;
						},
						message: '两次输入密码不一致',
						trigger: ['change', 'blur'],
					}],
				},
				tips3: "",
				disabled3: false,
				changePasswordLoading: false,
				// modal提示框
				showModal: false,
				contentModal: "请重新登录",

				//支付密码
				setPayPasswordShow: false,
			};
		},
		computed: {
			...mapState(['userInfo'])
		},
		components: {
			fSetPayPassword
		},

		onShow() {
			// 验证是否登录
			this.$loginCheck();
		},
		onLoad(option) {
			//来源 ，设置什么密码  1设置支付密码
			if (option.source) {
				switch (option.source*1) {
					case 1:
						this.setPayPasswordShow = true;
						break;
					default:
						break;
				}
			}
		},
		methods: {
			// 提示
			showToast() {
				uni.$u.toast('此功能正在开发中');
			},
			// 页面跳转
			onJump(url) {
				uni.redirectTo({
					url: url
				})
			},
			// 跳转前判断登录
			onTokenJump(url) {
				this.judgeLogin(() => {
					uni.navigateTo({
						url: url
					});
				});
			},
			// 退出登录
			logOut(content) {
				clearMember().then(() => {
					this.$store.commit("emptyUserInfo");
					this.contentModal = content;
					setTimeout(() => {
						this.showModal = true;
					}, 500)
				});
			},
			// 关闭修改绑定手机号窗口
			changePhoneClose() {
				this.phoneModel = {
					code: "",
					newPhone: "",
					newCode: ""
				};
				this.$refs.uCode1.reset();
				this.$refs.uCode2.reset();
				this.tips1 = "";
				this.disabled1 = false;
				this.tips2 = "";
				this.disabled2 = true;
				this.changePhoneShow = false;
			},
			// 新手机号改变后执行
			changePhone(e) {
				if (e.length == 11 && e !== this.userInfo.telPhone) {
					this.disabled2 = false;
				} else {
					this.disabled2 = true;
				}
			},
			// 获取原手机验证码按钮文字
			codeChange1(text) {
				this.tips1 = text;
			},
			// 获取原手机验证码操作
			getCode1() {
				if (this.$refs.uCode1.canGetCode) {
					uni.showLoading({
						title: '正在获取验证码'
					});
					const params = {
						phone: this.userInfo.telPhone
					}
					sendUnbindPhoneSMS(params, {
						custom: {
							load: false
						}
					}).then((res) => {
						uni.hideLoading();
						uni.$u.toast('验证码已发送，请注意查收');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode1.start();
					});
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			// 获取新手机验证码按钮文字
			codeChange2(text) {
				this.tips2 = text;
			},
			// 获取新手机验证码操作
			getCode2() {
				if (this.$refs.uCode2.canGetCode) {
					uni.showLoading({
						title: '正在获取验证码'
					});
					const params = {
						phone: this.phoneModel.newPhone
					}
					sendBindPhoneSMS(params, {
						custom: {
							load: false
						}
					}).then((res) => {
						uni.hideLoading();
						uni.$u.toast('验证码已发送，请注意查收');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode2.start();
					});
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			// 提交修改绑定手机号
			submitChangePhone() {
				// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
				this.$refs.form1.validate().then(res => {
					this.changePhoneLoading = true;
					const params = this.phoneModel;
					updateBindPhone(params).then((res) => {
						this.changePhoneClose();
						this.changePhoneLoading = false;
						// 修改成功后退出登录
						this.logOut('修改绑定手机成功，请重新登录！');
					}).catch(() => {
						this.changePhoneLoading = false;
					})
				}).catch(errors => {

				});
			},
			// 关闭修改登录密码窗口
			changePasswordClose() {
				this.passwordModel = {
					code: "",
					oldPassword: "",
					newPassword: "",
					conPassword: "",
				};
				this.$refs.uCode3.reset();
				this.tips3 = "";
				this.disabled3 = false;
				this.changePasswordShow = false;
				this.curNow = 0;
			},
			// 切换修改密码验证方式
			sectionChange(index) {
				this.passwordModel = {
					code: "",
					oldPassword: "",
					newPassword: "",
					conPassword: "",
				};
				this.curNow = index;
			},
			// 获取修密码手机验证码按钮文字
			codeChange3(text) {
				this.tips3 = text;
			},
			// 获取原手机验证码操作
			getCode3() {
				if (this.$refs.uCode3.canGetCode) {
					uni.showLoading({
						title: '正在获取验证码'
					});
					const params = {
						phone: this.userInfo.telPhone
					}
					sendPasswordSMS(params, {
						custom: {
							load: false
						}
					}).then((res) => {
						uni.hideLoading();
						uni.$u.toast('验证码已发送，请注意查收');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode3.start();
					});
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			// 提交修改密码
			submitChangePassword() {
				// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
				if (this.curNow == 0) {
					// 旧密码验证修改登录密码
					this.$refs.form2.validate().then(res => {
						this.changePasswordLoading = true;
						const params = {
							oldPassword: this.passwordModel.oldPassword,
							newPassword: this.passwordModel.newPassword,
							updateStyle: 1
						};
						updatePassword(params).then((res) => {
							this.changePasswordClose();
							this.changePasswordLoading = false;
							// 修改成功后退出登录
							this.logOut('修改登录密码成功，请重新登录！');
						}).catch(() => {
							this.changePasswordLoading = false;
						})
					}).catch(errors => {

					});
				} else {
					// 短信验证码修改登录密码
					this.$refs.form3.validate().then(res => {
						this.changePasswordLoading = true;
						const params = {
							code: this.passwordModel.code,
							newPassword: this.passwordModel.newPassword,
							updateStyle: 2
						};
						updatePassword(params).then((res) => {
							this.changePasswordClose();
							this.changePasswordLoading = false;
							// 修改成功后退出登录
							this.logOut('修改登录密码成功，请重新登录！');
						}).catch(() => {
							this.changePasswordLoading = false;
						})
					}).catch(errors => {

					});
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep.u-cell-group {
		background-color: #FFFFFF;
	}

	.popupBox {
		width: 650rpx;
		padding: 40rpx;
		position: relative;

		.title {
			text-align: center;
			font-size: 32rpx;
		}

		.phone {
			padding: 0 0 20rpx 0;
			font-size: 28rpx;
			text-align: center;
		}

		.close {
			position: absolute;
			top: 20rpx;
			right: 20rpx;
		}
	}
</style>
